<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TodoHeader @add='add'/>
    <!-- 主体部分 -->
    <TodoBody :list='renderList' @del='del'/>
    <!-- 底部部分 -->
    <TodoFooter :leaveNum = 'leaveNum' :type='type' @clearFinished='clearFinished' @changeStatus='changeStatus'/>
  </section>
</template>

<script>
import { v4 as uuid } from 'uuid'
import TodoBody from './components/TodoBody.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
export default {
  components: { TodoBody, TodoFooter, TodoHeader },
  data () {
    return {
      list: [
        { id: uuid(), name: '读万卷书', isDone: true },
        { id: uuid(), name: '行万里路', isDone: false },
        { id: uuid(), name: '学海无涯', isDone: true }
      ],
      type: 'all'
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter((item) => {
        return item.id !== id
      })
    },
    add (name) {
      if (!name) return alert('输入不能为空!!')
      const obj = {
        id: uuid(),
        name,
        isDone: false
      }
      this.list = [...this.list, obj]
    },
    clearFinished () {
      this.list = this.list.filter(item => !item.isDone)
    },
    changeStatus (type) {
      this.type = type
    }
  },
  computed: {
    leaveNum () {
      return this.list.filter(item => !item.isDone).length
    },
    renderList () {
      switch (this.type) {
        case 'all':
          return this.list
        case 'pending':
          return this.list.filter(item => !item.isDone)
        case 'finished':
          return this.list.filter(item => item.isDone)
        default:
          return this.list
      }
    }
  }
}
</script>

<style></style>
